<template>
  <div class="edit_container">
    <quill-editor v-model="content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @ready="onEditorReady($event)"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
    </quill-editor>
    <sel-file ref="selFile"
              @callback="selFileCallBack"
              :albumCode="albumCode"
              dialogTitle="选择图片"
              selectType="checkbox"
              selMaxWidth="300px"
              selMaxHeight="300px">
    </sel-file>
  </div>
</template>
 
<script>
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],  //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],  // 标题，键值对的形式；1、2表示字体大小
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],  //列表
  [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
  [{ 'indent': '-1' }, { 'indent': '+1' }],  // 缩进
  [{ 'direction': 'rtl' }],    // 文本方向
  [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],  //几级标题
  [{ 'color': [] }, { 'background': [] }],  // 字体颜色，字体背景颜色
  [{ 'align': [] }], //对齐方式
  ['clean'], //清除字体样式
  // ['image'], //上传图片、上传视频
  ['sourceEditor']     //新添加的工具
]

import * as Quill from 'quill' //引入编辑器
import { ImageDrop } from 'quill-image-drop-module';
import selFile from '@/components/file/selFile';
Quill.register('modules/imageDrop', ImageDrop);
export default {
  name: 'App',
  props: {
    cabackcontent: {
      type: String,
      default: ''
    },
    isCheck: {
      type: Boolean
    },
    isRedact:{
      type: Boolean
    },
    albumCode: String
  },

  data () {
    return {
      content: ``,
      editorOption: {
        modules: {
          toolbar: {
            container: toolOptions,  // 工具栏选项
            handlers: {
              sourceEditor: () => {     //添加工具方法
                if(!this.isCheck){
                  this.$refs.selFile.open()
                }
              }
            }
          }
        },
      },
    }
  },
  created () {

  },
  beforeMount () {

  },
  mounted () {
    if(!this.isCheck){
      this.initButton()
    }
    this.content = this.cabackcontent
  },
  components: {
    selFile
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill;
    }
  },
  destroyed () {
    this.content = ``;
  },
  methods: {
    initButton() { //在使用的页面中初始化按钮样式
      const sourceEditorButton = document.querySelector('.ql-sourceEditor');
      sourceEditorButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px;";
      sourceEditorButton.innerText = "上传图片";
    },
    onEditorReady (val, editor) { // 准备编辑器
      if(this.isCheck){
        this.$refs.myQuillEditor.quill.enable(false); // 在获取焦点的时候禁用
      }
    },
    onEditorBlur () { }, // 失去焦点事件
    onEditorFocus () {

    }, // 获得焦点事件
    onEditorChange () {

    },
    selFileCallBack (val) {
      this.$emit('getContent', val)
      // this.content = this.content + '<p><img src=""></img></p>';
      let imgStr = '';
      for (let i = 0; i < val.length; i++) {
        imgStr += '<img src="' + val[i] + '">';
      }
      this.content = this.content + '<p>' + imgStr + '</p>'
    }
  },
  watch: {
    'content' (val) {
      this.$emit('getContent', val)
    },
    cabackcontent: {
      handler(newValue, oldValue) {
        this.content = newValue;
      },
    }
  }
}
</script>
<style scoped>
.edit_container {
  background-color: #fff;
}
.ql-editor {
  height: 300px;
}
</style>